<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>
<body>
<div id="app">
  <h1>网站列表</h1>
  <div
    v-for="site in info"
  >
    {{ site.name }}
  </div>
</div>

<script>
        // 拦截器
        //请求拦截
        axios.interceptors.request.use(config => {
            // Do something before request is sent
            return config;
        }, error => {
            // Do something with request error
            return Promise.reject(error);
        });
        //响应拦截
        axios.interceptors.response.use(response => {
            // Do something before response is sent
            return response;
        }, error => {
            // Do something with response error
            return Promise.reject(error);
        });
        //指定请求的根路径
        axios.defaults.baseURL = 'https://autumnfish.cn'
        //指定请求头
        // axios.defaults.headers
        //指定超时时间
        // axios.defaults.timeout
        axios.get('/top/playlist', {
            limit: 10
        })
            .
            then(res => {
                console.log(res)
            })
            .
            catch(err => {
                console.error(err);
            })
// axios.post(url,params)
// .then(res => {
// console.log(res)
// })
// .catch(err => {
// console.error(err);
// })
// delete
// put
// patch
// all 所有请求都适配

</script>
<script>



const app = {
  data() {
    return {
      info: 'Ajax 测试!!'
    }
  },
  mounted () {
        // 拦截器
        //请求拦截
        axios.interceptors.request.use(config => {
            // Do something before request is sent
            return config;
        }, error => {
            // Do something with request error
            return Promise.reject(error);
        });
        //响应拦截
        axios.interceptors.response.use(response => {
            // Do something before response is sent
            return response;
        }, error => {
            // Do something with response error
            return Promise.reject(error);
        });
    //指定请求的根路径
    axios.defaults.baseURL = 'https://www.runoob.com'
    axios.get('/try/ajax/json_demo.json')
      .then(response => {
        console.log(response);
        this.info = response.data.sites;
    })
      .catch(function (error) { // 请求失败处理
        console.log(error);
      });
  }
}
Vue.createApp(app).mount('#app')
</script>

</body>
</html>